<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" :width="width" :before-close="beforeClose">
      <div class="dialog-content">
        <div class="search">
          <div v-if="fix.id === 'roleId'" class="search-input">
            <div class="input-text">角色名称：</div>
            <el-input
              class="input"
              size="mini"
              placeholder="输入编码进行过滤"
              v-model="roleName"
              clearable
              @keyup.enter.native="search"
            >
            </el-input>
          </div>
          <div v-else class="search-input">
            <div class="input-text">姓名：</div>
            <el-input
              class="input"
              size="mini"
              placeholder="输入姓名进行过滤"
              v-model="form.name"
              clearable
              @keyup.enter.native="search"
            >
            </el-input>
            <div class="input-text">编码：</div>
            <el-input
              class="input"
              size="mini"
              placeholder="输入编码进行过滤"
              v-model="form.code"
              clearable
              @keyup.enter.native="search"
            >
            </el-input>
          </div>
          <div class="search-btn" @click="search">
            <i class="el-icon-search" style="color: #fff; font-size: 16px"></i>
          </div>
          <div class="refresh-btn" @click="refreshPerson">
            <i class="el-icon-refresh-right" style="font-weight: 700; font-size: 16px"></i>
          </div>
        </div>
        <div class="tab-list">
          <div class="tab-list-left">
            <el-tabs type="border-card">
              <el-tab-pane :label="fix.name">
                <div class="tips">{{ fix.tip }}</div>
                <ul class="userList">
                  <el-checkbox-group v-model="selectedUserids" @change="radiochange">
                    <el-checkbox
                      class="userList-item"
                      v-for="item in userList"
                      :key="item[fix.id]"
                      :label="item[fix.id]"
                    >
                      <i v-if="fix.id === 'roleId'" class="el-icon-s-custom"></i>
                      <img v-else src="../../assets/images/user.png" class="item-pic" alt="" />
                      <span class="item-text">{{ item[fix.key] + ' ' + (item[fix.id] || '') }}</span>
                    </el-checkbox>
                  </el-checkbox-group>
                  <!-- <div class="more" v-if="dialogTotal >= 10" @click="more">
                    加载更多<i class="el-icon-caret-bottom"></i>
                  </div> -->
                  <div class="more" v-if="userListTotal > userList.length" @click="moreRole">
                    加载更多<i class="el-icon-caret-bottom"></i>
                  </div>
                </ul>
              </el-tab-pane>
              <!-- <el-tab-pane label="角色">
						  <div class="tips">{{''}}</div>
						  <ul class="userList roleList">
							  <li class="userList-item" v-for="item in roleList" :key="item.userCode">
								  <img src="../../assets/images/user.png" class="item-pic" alt="">
									<span class="item-text">{{item.userName}}</span>
									<span class="checkbox">
										<el-checkbox v-model="item.checked" @change="selectRole(item)"></el-checkbox>
									</span>
							  </li>
						  </ul>
					  </el-tab-pane> -->
            </el-tabs>
          </div>
          <div class="tab-list-right">
            <div class="header">
              <div class="header-left">已选择 {{ selectedUserids.length }}/500</div>
              <div class="header-right">
                <el-button size="mini" type="info" @click="removeAll">清除</el-button>
              </div>
            </div>
            <div class="body">
              <div class="select">
                <div class="title">{{ fix.name }}</div>
                <ul class="list">
                  <li class="list-item" v-for="item in selectedUsers" :key="item[fix.id]">
                    <i v-if="fix.id === 'roleId'" class="el-icon-s-custom"></i>
                    <img v-else src="../../assets/images/user.png" class="item-pic" alt="" />
                    <span class="item-text">{{ item[fix.key] + ' ' + (item.psnCode || '') }}</span>
                    <i class="el-icon-close" @click="removeUser(item)"></i>
                  </li>
                </ul>
              </div>
              <!-- <div class="select" v-if="selectRoleList.length > 0">
                <div class="title">角色</div>
                <ul class="list">
                  <li
                    class="list-item"
                    v-for="item in selectRoleList"
                    :key="item.userCode"
                  >
                    <img
                      src="../../../assets/images/user.png"
                      class="item-pic"
                      alt=""
                    />
                    <span class="item-text">{{ item.userName }}</span>
                    <i class="el-icon-close" @click="removeRole(item)"></i>
                  </li>
                </ul>
              </div> -->
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="getSelectedUsers">确 定</el-button>
        <!-- <el-button type="primary" @click="submitUser">确 定</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'User',
  props: {
    type: {
      type: String,
      default: 'radio',
    },
    // 是否显示
    // dialogVisible: {
    //   type: Boolean,
    //   default: false,
    // },
    // 标题
    title: {
      type: String,
      default: '人员选择',
    },
    //人员列表数据
    userList: {
      type: Array,
      default: () => [],
    },
    //选中的人员数据
    value: {
      type: String,
      default: '',
    },
    //选中的人员数据
    // selectUserList: {
    //   type: Array,
    //   default: () => [],
    // },
    // dialog宽度
    width: {
      type: String,
      default: '80%',
    },
    // 分页总数
    userListTotal: {
      type: Number,
      default: 0,
    },
    config: {
      type: Object,
      default: () => {
        return {
          key: 'name',
          id: 'id',
          name: '用户',
          tip: '姓名（组织、部门）',
        };
      },
    },
  },
  data() {
    return {
      roleName: '',
      selectedUserids: [],
      dialogVisible: false,
      fix: {
        key: 'name',
        id: 'id',
        name: '用户',
        tip: '姓名（组织、部门）',
      },
      form: {
        name: '',
        code: '',
        page: 1,
        size: 10,
      },
    };
  },
  computed: {
    // num() {
    //   return this.selectUserList.length;
    // },
    selectedUsers() {
      return this.userList.filter((item) => this.selectedUserids.includes(item[this.fix.id]));
    },
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.fix = {
          ...this.fix,
          ...this.config,
        };
        if (this.value) {
          this.selectedUserids = Array.isArray(this.value) ? this.value : this.value.split(',');
        }
      }
    },
  },
  methods: {
    radiochange(item) {
      if (this.type === 'radio') {
        this.selectedUserids = item.slice(-1);
      }

      // this.$emit("radiochange",)
    },
    //搜索
    search() {
      this.form.page = 1;
      this.$emit('search', this.form);
    }, //关闭dialog前
    //关闭dialog前
    beforeClose() {
      this.dialogVisible = false;
      this.selectedUserids = [];
      this.form.page = 1;
      this.$emit('closePersonnel');
    },
    //确定按钮
    submitUser() {
      this.$emit('submitUser');
    },
    //清空
    refreshPerson() {
      this.form.name = '';
      this.form.code = '';
      this.form.page = 1;
      this.$emit('refreshPerson', this.form);
    },
    //选中人员
    selectUser(item) {
      this.$emit('selectUser', item);
    },
    //移除选中人员
    removeUser(selItem) {
      this.selectedUserids = this.selectedUserids.filter((id) => id !== selItem[this.fix.id]);
    },
    //移除所有选中人员
    removeAll() {
      // this.$emit("removeAll");
      this.selectedUserids = [];
    },
    // 加载更多
    moreRole() {
      this.form.page++;
      this.$emit('moreRole', this.form);
    },
    getSelectedUsers(value) {
      if (this.selectedUserids.length === 0) {
        return this.$message.error('未进行人员选择');
      }
      this.$emit('input', this.selectedUsers.map((item) => item[this.fix.id])?.join(','));
      this.$emit('getPlanLedger', this.selectedUsers);
      this.beforeClose();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep.el-tabs--border-card {
  box-shadow: 0 0 0;
}

.dialog-search {
  width: 100%;
  display: flex;
  // padding-bottom: 50px;
  // border-bottom: 1px solid #ededed;
  margin-bottom: 20px;
  position: relative;

  .search-left {
    width: 60%;
    display: flex;

    .input-text {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 25%;
    }
  }

  .search-right {
    // position: absolute;
    // right: 0;
    // top: 5px;
    display: flex;
    align-items: center;

    .search-btn {
      width: 50px;
      height: 32px;
      background-color: #5a616f;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 0 10px;
      cursor: pointer;
    }

    .refresh-btn {
      width: 50px;
      height: 32px;
      background-color: #e9e9e9;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }

  .btn {
    position: absolute;
    top: 40px;
    right: 0;
  }

  .form-time {
    width: 130px !important;
    height: 28px !important;
    line-height: 28px !important;
  }
}

.search {
  width: 60%;
  display: flex;
  align-items: center;

  .search-input {
    display: flex;
    width: 90%;

    .input-text {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100px;
    }

    .input {
      width: 40%;
    }
  }

  .search-btn {
    width: 50px;
    height: 32px;
    background-color: #5a616f;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 10px;
    cursor: pointer;
  }

  .refresh-btn {
    width: 50px;
    height: 32px;
    background-color: #e9e9e9;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
}

.more {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.tab-list {
  display: flex;
  margin-top: 15px;
  height: 400px;

  .tab-list-left {
    width: 60%;
    height: 100%;

    .tips {
      color: #ccc;
    }

    .userList {
      height: 300px;
      margin-top: 10px;
      overflow: auto;

      .userList-item {
        width: 100%;
        height: 30px;
        line-height: 30px;
        display: flex;
        align-items: center;
        position: relative;

        .item-text {
          margin-left: 5px;
          font-size: 14px;
        }

        .checkbox {
          position: absolute;
          right: 0;
        }
      }
    }

    .userList::-webkit-scrollbar {
      display: none;
    }

    .roleList {
      height: 321px;
    }
  }

  .tab-list-right {
    width: 40%;
    height: 100%;
    .header {
      width: 100%;
      height: 40px;
      line-height: 40px;
      background-color: #f5f7fa;
      border: 1px solid #dcdfe6;
      border-left: none;
      box-shadow: 0 0 0;
    }

    .body {
      width: 100%;
      height: 362px;
      border: 1px solid #dcdfe6;
      border-left: none;
      border-top: none;
      // -webkit-box-shadow:2px 2px 10px #dcdfe6;
      // box-shadow:0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
      overflow: auto;

      .select {
        padding: 5px;

        .title {
          margin-bottom: 5px;
          width: 30px;
          height: 20px;
          color: #165dff;
          line-height: 20px;
        }

        .list {
          font-size: 12px;

          .list-item {
            width: 100%;
            height: 30px;
            line-height: 30px;
            margin-bottom: 3px;
            display: flex;
            align-items: center;
            background-color: #f7f7f7;
            position: relative;

            .item-text {
              margin-left: 5px;
            }

            .el-icon-close {
              position: absolute;
              right: 10px;
              top: 10px;
              cursor: pointer;
            }
          }
        }
      }
    }

    .body::-webkit-scrollbar {
      display: none;
    }
  }
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
::v-deep {
  .tab-list .tab-list-left .userList .userList-item {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    position: relative;
    justify-content: space-between;
  }
  .el-checkbox__label {
    display: flex;
  }
}
</style>
